<template>
    <vol-box :lazy="true" v-model="model" title="选择星辰凭证科目" :width="900" :padding="0">
        <div>
            <!-- 搜索配置 -->
            <div style="padding-top: 10px">
                <vol-form :labelWidth="90" ref="formRef" :formFields="formFields" :formRules="formRules">
                </vol-form>
            </div>
            <div class="table-item-header">
                <vol-title icon="edit" title="云星辰科目列表"></vol-title>
                <div class="table-item-buttons">
                    <el-button type="primary" @click="search" plain>查询</el-button>
                </div>
            </div>
            <!-- 表格数据 -->
            <vol-table ref="accountSubjectRef" rowKey="AccountSubjectId" rowParentField="ParentId" :lazy="true"
                :defaultExpandAll="false" :columns="columns" :pagination-hide="true" :height="700" :url="url"
                :single="single" :loadTreeChildren="loadTreeChildren" @loadBefore="loadBefore" :ck="true"
                @rowClick="rowClick"></vol-table>
        </div>
        <template #footer>
            <el-button type="primary" @click="detailSelectClick" size="small">选择数据</el-button>
        </template>
    </vol-box>
</template>
<script setup>
import VolForm from "@/components/basic/VolForm.vue";
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance()
const accountSubjectRef = ref()
const model = ref(false)
//调用的接口地址,这里使用的生成页面的接口，也可以参照：组件示例->table组件中自定义配置
const url = ref('api/ImportCostScheme/getTreeTableRootData')

//是否单选(明细表格选择数据)
const single = ref(false);
const detailRow = ref({})


//表格配置(可以将生成vue文件中columns配置复制过来)
//表格更多配置见:组件示例->voltable表格组件
const columns = ref([
    { field: 'AccountSubjectId', title: '科目标识', type: 'string', hidden: true, width: 120 },
    { field: 'AccountSubjectNo', title: '科目编码', type: 'string', width: 80 },
    { field: 'AccountSubjectName', title: '科目名称', type: 'string', width: 80 },
    { field: 'SubjectDirectionId', title: '借贷方向标识', type: 'string', hidden: true, width: 110 },
    { field: 'SubjectDirectionName', title: '借贷方向', type: 'string', width: 60 },
    { field: 'IsAssist', title: '启用辅助核算', type: 'string', width: 60 },
])
const loadTreeChildren = (tree, treeNode, resolve) => {
    //加载子节点
    let url = `api/ImportCostScheme/getTreeTableChildrenData?accountSubjectId=${tree.AccountSubjectId}`; //Role_Id换为表的主键字段
    proxy.http.post(url, {}).then((result) => {
        resolve(result);
    });
};
//弹出框打开选择数据
const open = (row) => {
    //明细表表格选择数据传进来的当前行
    detailRow.value = row;
    //如果是明细表表格传进来的按钮，表格设置为单选
    single.value = !!row;
    model.value = true
    //刷新表格的数据
    nextTick(() => {
        accountSubjectRef.value?.load(null, true)
    })
}
const emit = defineEmits(['onSelectAccountSubject'])
//选择数据按钮
const detailSelectClick = () => {
    //回写数据到明细表
    let rows = accountSubjectRef.value.getSelected()
    if (!rows.length) {
        return proxy.$message.error('请选择数据')
    }
    if (rows.length > 1) {
        return proxy.$message.error('只能选择一条数据')
    }
    //如果是明细表表格传进来的按钮,直接给表格行数据设置值
    getAccountSubjectData(rows[0])
    //选择数据回调
    model.value = false;
}

const getAccountSubjectData = (row) => {

    let url = 'api/ImportCostScheme/getAccountSubjectData';
    proxy.http.post(url, row.AccountSubjectId).then((result) => {
        if (detailRow.value) {
            detailRow.value.AccountSubjectId = result.AccountSubjectId
            detailRow.value.AccountSubjectNo = result.AccountSubjectNo
            detailRow.value.AccountSubjectName = result.AccountSubjectName
            detailRow.value.SubjectDirectionId = result.SubjectDirectionId
            detailRow.value.SubjectDirectionName = result.SubjectDirectionName
            detailRow.value.IsAssist = result.IsAssist
            detailRow.value.IsDepartment = result.IsDepartment
            detailRow.value.AssistItemId = null
            detailRow.value.ExpenseItemRangeId = ""
            detailRow.value.ExpenseItemRange = ""


        } else {
            emit('onSelectAccountSubject', result)
        }
    });
}

//查询点击事件
const search = () => {
    accountSubjectRef.value.load(null, true)
}
//表数据加载设置查询条件
const loadBefore = (param, callBack) => {
    param.wheres = proxy.base.getSearchParameters(proxy, formFields, formRules);

    callBack(true)
}

//行点击
const rowClick = ({ row, column, event, index }) => {
    accountSubjectRef.value.clearSelection()
    accountSubjectRef.value.toggleRowSelection(row);
};

const formFields = reactive({
    BillNo: null,
    BillDate: [null, null],
});
const formRules = reactive([
    [
        { title: "订单编号", field: "BillNo", type: "like", colSize: 3 },
        { title: "订单日期", range: true, field: "BillDate", type: "date", colSize: 6 },
    ],
]);


//暴露方法给【选择物料】按钮使用
defineExpose({ open })
</script>
<style lang="less" scoped>
.table-item-header {
    display: flex;
    padding: 6px 0;

    .table-item-buttons {
        margin-left: auto;
    }
}

.small-text {
    font-size: 12px;
    color: #2196f3;
    padding-top: 10px;
    position: relative;
    top: 2px;
}
</style>